<!doctype html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link rel="stylesheet" media="all" type="text/css" href="style/style-demo.css">

    <script src="script/jquery-1.11.1.js"></script>
    <script src="script/jquery.easing-1.3.js"></script>
    <script src="script/jquery.mousewheel-3.1.12.js"></script>
    <script src="script/jquery.jcarousellite.js"></script>
</head>
<body>

<div id="jcl-demo">

    <!-- Demo 12 -->
    <br><br><h4 id="demo12">Image Slider with external controls.</h4><hr>

    <p>
        External number based control.
    </p>

    <div class="custom-container imageSliderExt">
        <div>
            <a href="#" class="prev">&lsaquo;</a>
            <a href="#" class="go 1">1</a>
            <a href="#" class="go 2">2</a>
            <a href="#" class="go 3">3</a>
            <a href="#" class="go 4">4</a>
            <a href="#" class="go 5">5</a>
            <a href="#" class="go 6">6</a>
            <a href="#" class="go 7">7</a>
            <a href="#" class="go 8">8</a>
            <a href="#" class="go 9">9</a>
            <a href="#" class="go 10">10</a>
            <a href="#" class="go 11">11</a>
            <a href="#" class="go 12">12</a>
            <a href="#" class="next">&rsaquo;</a>
        </div>
        <br><br><br>
        <div class="carousel">
            <ul>
                <li><img src="image/1.jpg"></li>
                <li><img src="image/2.jpg"></li>
                <li><img src="image/3.jpg"></li>
                <li><img src="image/4.jpg"></li>
                <li><img src="image/5.jpg"></li>
                <li><img src="image/6.jpg"></li>
                <li><img src="image/7.jpg"></li>
                <li><img src="image/8.jpg"></li>
                <li><img src="image/9.jpg"></li>
                <li><img src="image/10.jpg"></li>
                <li><img src="image/11.jpg"></li>
                <li><p>Some <code>{code}</code> if you are a developer? Do you like this <span class="label label-info">style</span> instead?</p></li>
            </ul>
        </div>
        <div class="clear"></div>
    </div>

<pre class="prettyprint">
$(".imageSliderExt .carousel").jCarouselLite({
    btnNext: ".imageSliderExt .next",
    btnPrev: ".imageSliderExt .prev",
    visible: 1,
    btnGo:
    [".imageSliderExt .1", ".imageSliderExt .2",
    ".imageSliderExt .3", ".imageSliderExt .4",
    ".imageSliderExt .5", ".imageSliderExt .6",
    ".imageSliderExt .7", ".imageSliderExt .8",
    ".imageSliderExt .9", ".imageSliderExt .10",
    ".imageSliderExt .11", ".imageSliderExt .12"]
});
</pre>

    <script type="text/javascript">
        $(function() {
            $(".imageSliderExt .carousel").jCarouselLite({
                btnNext: ".imageSliderExt .next",
                btnPrev: ".imageSliderExt .prev",
                visible: 1,
                btnGo: [".imageSliderExt .1", ".imageSliderExt .2",
                    ".imageSliderExt .3", ".imageSliderExt .4",
                    ".imageSliderExt .5", ".imageSliderExt .6",
                    ".imageSliderExt .7", ".imageSliderExt .8",
                    ".imageSliderExt .9", ".imageSliderExt .10",
                    ".imageSliderExt .11", ".imageSliderExt .12"]
            });
        });
    </script>

</div>
</body>
</html>